<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>我的账户</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/m-global.css">
</head>

<body>

  <div class="layui-fluid">
    <div class="layui-card">
      <form action="" class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label">流水号</label>
            <div class="layui-input-block">
              <input type="text" name="sn" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label">用户id</label>
            <div class="layui-input-block">
              <input type="text" name="user_id" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label">手机</label>
            <div class="layui-input-block">
              <input type="tel" name="mobile" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label layui-form-label--lg">创建时间范围</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="" placeholder="请选择" autocomplete="off" id="createdTime">
              <input type="hidden" class="js-time-start" name="start_time">
              <input type="hidden" class="js-time-end" name="end_time">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn js-table-search" lay-submit lay-filter="js-btn-table-search">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      <div class="layui-card-body">
        <table id="tableAccount" lay-filter="tableAccount"></table>
        <!-- <script type="text/html" id="withdraw_state">
          {{# if(d.withdraw_state == 'default'){ }}
          <span class="layui-badge-rim">申请中</span>
          {{# } else if(d.withdraw_state == 'success'){ }}
          <span class="layui-badge layui-bg-green">已成功</span>
          {{# } else if(d.withdraw_state == 'fail'){ }}
          <span class="layui-badge">已失败</span>
          {{# } }}
        </script> -->
        <script type="text/html" lay-filter="tableWithdrawTime">
          {{#}} d.withdraw_time {{#}}
        </script>
        <script type="text/html" id="tableToolBar">
          {{# if(d.withdraw_state == 'default'){ }}
          <a class="layui-btn layui-btn-xs" lay-event="success">通过</a>
          <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="fail">驳回</a>
          {{# } else if(d.withdraw_state == 'success'){ }}
          <span class="layui-badge layui-bg-gray">已成功</span>
          {{# } else if(d.withdraw_state == 'fail'){ }}
          <span class="layui-badge layui-bg-gray">已失败</span>
          {{# } }}
        </script>
      </div>
    </div>
  </div>

  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index', //主入口模块
      utils: "m-utils"
    }).use(['index', 'table', 'layer', 'jquery', 'utils', 'form', 'element', 'laytpl'], function () {
      var $ = layui.$,
        layer = layui.layer,
        form = layui.form,
        table = layui.table,
        utils = layui.utils,
        form = layui.form,
        element = layui.element,
        admin = layui.admin,
        laytpl = layui.laytpl;
      // utils.hello();
      utils.laydate('#createdTime');
      utils.laydate('#demoTime');
      $('body').on('click', '.js-show-img', function () {
        var $this = $(this);
        utils.showImg($this, 'nickname')
      });
      // 收益流水
      // table 字段设置
      utils.setTableOption('tablelist', 'post');
      // table排序
      table.on('sort(tableIncome)', function (obj) {
        console.log({
          field: obj.field,
          type: obj.type
        });
        table.reload('tableIncome', {
          initSort: obj,
          where: {
            order_by: obj.field + ' ' + obj.type
          }
        })
      });
      // table数据
      var tableAccount = table.render({
        elem: '#tableAccount',
        height: 'full-270',
        url: 'https://easy-mock.com/mock/5b0cac0df1440f14dcb5d2ba/smilemall/my_account',
        page: true,
        cellMinWidth: 150,

        cols: [
          [{
              field: 'withdraw_id',
              title: '提现编号',
              width: 180
            },
            {
              field: 'amount',
              title: '提现金额（元）',
              sort: true,
              templet: function (d) {
                // console.log(d.amount, utils.returnFloat(d.amount))
                return utils.returnFloat(d.amount);
              }
            },
            {
              field: 'user_id',
              title: '提现人',
              width: 180
            },
            {
              field: 'withdraw_type',
              title: '提现方式',
              templet: function (d) {
                if (d.withdraw_type === 'wx') {
                  return `<span class="layui-badge-rim">微信</span>`;
                } else if (d.withdraw_type === 'alipay') {
                  return `<span class="layui-badge-rim">支付宝</span>`;
                }
              }
            },
            {
              field: 'account_num',
              title: '提现账号',
              width: 180
            },

            /* {
              field: 'withdraw_state',
              title: '提现状态',
              templet: '#withdraw_state'
            }, */
            {
              field: 'withdraw_time',
              title: '提现时间',
              width: 180,
              templet: '#tableWithdrawTime'
            },
            {
              field: 'created_time',
              title: '提现申请时间',
              width: 180,
              templet: function (d) {
                var timestamp = new Date(d.created_time * 1000);
                return utils.formatTime(timestamp);
              }
            },
            {
              field: 'avatar',
              title: '头像',
              width: 90,
              templet: function (d) {
                return `<div class="js-show-img"><img src="${d.avatar}"/></div>`
              }
            },
            {
              field: 'nickname',
              title: '昵称'
            },
            {
              field: 'mobile',
              title: '手机',
              width: 120
            },
            {
              field: 'withdraw_state',
              title: '操作',
              fixed: 'right',
              width: 180,
              align: 'center',
              templet: '#tableToolBar',
              toolbar: '#tableToolBar'
            }
          ]
        ],
        done: function (res) {
          console.log('table数据：', res);
        },
      });
      // 监听工具条
      table.on('tool(tableAccount)', function (obj) {
        console.log('tool:', obj);
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        var toolhtml;
        if (layEvent === 'success') { //通过
          //do somehing
          layer.confirm(
            `真的通过${data.nickname}提现<b class="g-ml--5 g-mr--5 g-c--red">${utils.returnFloat(data.amount)}</b>元的申请吗？`,
            function (index) {
              $.post('https://easy-mock.com/mock/5b0cac0df1440f14dcb5d2ba/smilemall/my_account', function (
                res) {
                if (res.code === 200) {
                  layer.msg('操作成功');
                  /* 方案一 使用updata更新table,
                  原因：因为不是对应field的数据，所以[data-field="toolStatus"]所在的工具条不支持更新，
                  1.只能通过使用laytpl获取到更新后的代码模板，
                  2.操纵tr = obj.tr找到tool对应的field('td[data-field="toolStatus"]'),找到对饮field下面的的div用html()更新tool内容 */
                  var timestamp = new Date(1527837613 * 1000);
                  var time = utils.formatTime(timestamp);
                  obj.update({
                    withdraw_state: 'success',
                    withdraw_time: time,
                  });
                  /* data.withdraw_state = 'success';
                  laytpl(tableToolBar.innerHTML).render(obj.data, function (html) { //tableToolBar为toolbar的script模板id
                    toolhtml = html;
                  });
                  tr.children('td[data-field="toolStatus"]').children('div').html(toolhtml); //toolStatus为当前表格工具列是表格的第几列 */
                  /* 方案二 使用.layui-laypage-btn，重载当前页面*/
                  /* $(".layui-laypage-btn").trigger('click'); */
                  /* 方案三  把工具栏和相关联的field的合并，工具栏需要添加templet:#tool_ID用来让update()识别，从而更新完成,必须是withdraw_state这一列没有，可以有更好的展示效果*/
                } else {
                  layer.msg(res.message, {
                    time: 2000
                  });
                }
              }, 'json');

              layer.close(index);
            })
        } else if (layEvent === 'fail') { //驳回
          let confirm_fail = layer.confirm(
            `真的驳回${data.nickname}提现<b class="g-ml--5 g-mr--5 g-c--red">${utils.returnFloat(data.amount)}</b>元的申请吗？`,
            function () {
              layer.prompt({
                formType: 2,
                title: '请输入驳回理由',
              }, function (value, index, elem) {
                $.post('https://easy-mock.com/mock/5b0cac0df1440f14dcb5d2ba/smilemall/my_account',
                  function (
                    res) {
                    if (res.code === 200) {
                      var timestamp = new Date(1527837613 * 1000);
                      var time = utils.formatTime(timestamp);
                      obj.update({
                        withdraw_state: 'fail',
                        withdraw_time: time,
                      });
                      /* data.withdraw_state = 'fail';
                      laytpl(tableToolBar.innerHTML).render(obj.data, function (html) { //tableToolBar为toolbar的script模板id
                        toolhtml = html;
                      });
                      tr.children('td[data-field="toolStatus"]').children('div').html(toolhtml); //toolStatus为当前表格工具列是表格的第几列 */
                      layer.msg('驳回成功');
                    } else {
                      layer.msg(res.message, {
                        time: 2000
                      })
                    }
                  }, 'json');

                layer.close(index);
                layer.close(confirm_fail);
              })

            })

        } else if (layEvent === 'edit') { //编辑
          //do something

          //同步更新缓存对应的值
          obj.update({
            username: '123',
            title: 'xxx'
          });
        }
      });
      //监听搜索
      form.on('submit(js-btn-table-search)', function (data) {
        var field = data.field;
        //table执行重载
        tableAccount.reload('tableAccount', {
          where: field
        });
        return false;
      });

    });
  </script>
</body>

</html>